import React, {useEffect, useRef} from "react";
import * as echarts from "echarts";
// import "echarts-liquidfill";
import "./index.less";
import {DTprovinces, DTsvg} from "@/views/echarts/waterChart/svgList";

const WaterChart = () => {
    const echartsRef = useRef<HTMLDivElement>(null);
    let myChart: any;
    let value = 0.5;
    let data = [value, value, value];
    console.log('---------------')
    const random = (lower: any, upper: any) => {
        lower = +lower || 0
        upper = +upper || 0
        return Math.random() * (upper - lower) + lower
    }
    const provinces: any = DTprovinces
    const datas: any = {
        from: [1381.1, 766.7],
        to: provinces.filter((item: any, index: number) => item.city === true).map((item: any, index: any) => {
            item.value = index % 2 === 0 ? 1 : 10
            if (item.coord[0] < 1380) {
                item.lineStyle = {
                    curveness: -0.3
                }
            }
            return item
        }),
        other: provinces.filter((item: any, index: number) => item.city === undefined)
    }
    let option: any = {
        backgroundColor: '#001529',
        tooltip: {
            show: false,
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params: any, ticket: any, callback: any) {
                console.log(params);
                var res = '';
                var name = params.name;
                var value = params.value[params.seriesIndex + 1] || params.value;
                res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
                return res;
            },
        },
        visualMap: {
            min: 1,
            max: 10,
            calculable: true,
            show: false,
            color: ['#f44336', '#00eaff'],
            textStyle: {
                color: '#fff',
            },


        },
        geo: {
            left: 10,
            right: 10,
            map: 'organ_diagram',
            itemStyle: {
                borderWidth: 0,
            },
            roam:true,
            emphasis: {
                focus: 'none',
                itemStyle: {
                    areaColor: '#ffffff',
                },
                label: {
                    show: false,
                },
            },
            regions: [
                {
                    name: 'map11',
                    itemStyle: {
                        areaColor: 'red',
                        color: 'red',
                    },
                },
            ],
        },
        series: [
            {
                type: 'lines',
                coordinateSystem: 'geo',
                z: 1,
                zlevel: 2,
                animation: false,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.6,
                    symbolSize: 10,
                    symbol: 'pin',
                    loop: true,
                },
                lineStyle: {
                    width: 1,
                    curveness: 0.3,
                },

                data: datas.to.map((item: any) => {
                    return {
                        lineStyle: item.lineStyle || {},
                        coords: [datas.from, item.coord],
                        name: item.name,
                        value: item.value,
                    };
                }),
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
//涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    show: false,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params: any) {
//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13,
                },
                emphasis: {
                    show: true,
                },
                symbol: 'circle',
                symbolSize: function (val: any) {
                    return 5; //圆环大小
                },
                itemStyle: {
                    show: false,
                    color: '#f00',
                },
                data: datas.to.map(function (item: any) {
                    return {
                        name: item.name,
                        value: [...item.coord, item.value],
                    };
                }),
                tooltip: {
                    formatter: (params: any) => {
                        return params.name;
                    },
                },
            },
//被攻击点
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
//涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    show: false,
                    position: 'right',
//offset:[5, 0],
                    color: '#0f0',
                    formatter: '{b}',
                    textStyle: {
                        color: '#0f0',
                    },
                },
                emphasis: {
                    show: true,
                    color: '#f60',
                },
                symbol: 'circle',
                symbolSize: function (val: any) {
                    return 5; //圆环大小
                },
                data: [
                    {
                        name: '平阳',
                        value: [...datas.from, 10],
                    },
                ],
                tooltip: {
                    formatter: (params: any) => {
                        return params.name;
                    },
                },
            },
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 3,
                rippleEffect: {
//涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 1, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    show: false,
                    position: 'right',
//offset:[5, 0],
                    color: '#0f0',
                    formatter: '{b}',
                    textStyle: {
                        color: '#0f0',
                    },
                },
                emphasis: {
                    show: true,
                    color: '#f60',
                },
                symbol: 'circle',
                symbolSize: function (val: any) {
                    return 5; //圆环大小
                },
                data: datas.other.map(function (item: any, index: number) {
                    const color = index % 2 === 0 ? 'red' : 'yellow'
                    return {
                        name: item.name,
                        value: [...item.coord, 1],
                        itemStyle: {
                            color
                        }
                    };
                }),
                tooltip: {
                    formatter: (params: any) => {
                        return params.name;
                    },
                },
            },
        ],
    };

    const setEcharts = () => {

        option && myChart.setOption(option);
    };

    useEffect(() => {
        myChart = echarts.init(echartsRef.current as HTMLDivElement);
        echarts.registerMap('organ_diagram', {svg: DTsvg});
        myChart.on('click', function (event:any) {
            console.log(event);
            myChart.dispatchAction({
                type: 'highlight',
                geoIndex: 0,
                name: event.name,
            });
        });
        const echartsResize = () => {
            myChart && myChart.resize();
        };
        window.addEventListener("resize", echartsResize, false);

        setEcharts();
        return () => {
            window.removeEventListener("resize", echartsResize);
            myChart && myChart.dispose();
        };
    }, );

    // 只判断数据的变化来动态setEcharts
    useEffect(() => {
        setEcharts();
    }, [value]);

    return <>
        {/*<div>*/}

        {/*    <div dangerouslySetInnerHTML={{__html: DTsvg}}/>*/}
        {/*</div>*/}
        <div ref={echartsRef} className="content-box"></div>;
    </>
};

export default WaterChart;
